'use client';
import http from '@/lib/request';
import { useAppDispatch } from '@/store/hooks';
import { addListData,} from '@/store/initSlice';
import { ApiResponse, Conversation } from '@/types/interface';
import Link from 'next/link';
import { useRouter, usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
type Props = {
	handleClickData: (isNew: boolean, id: string) => void;
};
const Left: React.FC<Props> = ({ handleClickData }) => {
	const [list, setList] = useState([] as Array<Conversation>);

	const [index, setIndex] = useState(-1);
	const router = useRouter();
	const pathname = usePathname();
	const dispatch = useAppDispatch();
	// const isActive = pathname === href;
	// console.log(pathname);
	const getData = async () => {
		return (await http.get('/perf/session/conversations', {
			// credentials: 'include',
		})) as ApiResponse<Array<Conversation>>;
	};
	const handleClickRouter = (i: number) => {
		if (i < 0) {
			// dispatch(
			// 	addQuery({
			// 		file_name: '',
			// 		text: '',
			// 		isSend: false,
			// 		loading: false,
			// 		conversationId: crypto.randomUUID(),
			// 	}),
			// );
			handleClickData(true,  crypto.randomUUID());
			router.push('/report');
		} else {
			router.push('/report/' + list[i].id);
			handleClickData(false, list[i].id);
		}
	};

	useEffect(() => {
		getData().then((res) => {
			// console.log(res);
			if (res.code == 0) {
				setList(res.data);
			} else setList([]);
		});
	}, []);
	return (
		<div className="w-52 sm:w-64 md:w-72 bg-gray-110 p-1 border-r-2 border-r-gray-200 overflow-auto sm:block hidden">
			<ul>
				<li className={
						'rounded-md hover:rounded-m cursor-pointer  hover:bg-gray-300 transition-all duration-300 p-1 pl-2'
					}
				>
					<Link href="/home">首页</Link>
				</li>
				<li className={
						'rounded-md hover:rounded-m cursor-pointer  hover:bg-gray-300 transition-all duration-300 p-1 pl-2'
					}
				>
					<Link href="/users">用户管理</Link>
				</li>
				<li
					onClick={() => {
						handleClickRouter(-1);
					}}
					className={
						'rounded-md hover:rounded-m cursor-pointer  hover:bg-gray-300 transition-all duration-300 p-1 pl-2'
					}
				>
					新建
				</li>
				{list.map((item, i) => {
					return (
						<li
							onClick={() => {
								handleClickRouter(i);
							}}
							className={
								'rounded-md hover:rounded-m cursor-pointer  hover:bg-gray-300 transition-all duration-300 p-1 pl-2' +
								(pathname == `/report/${item.id}` ? ' bg-gray-300' : '')
							}
							key={i}
						>
							{/* <Link href={`/home/${item.id}`}>{item.title}</Link> */}
							{item.title}
						</li>
					);
				})}
			</ul>
		</div>
	);
};

export default Left;
